<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邹兴林</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100%;
            background-color:#fafafc;
        }
       
            
        /* 搜索 */
        .sousuo{
            width: 100%;
            height: 44px;
            position: absolute;
            top: 0px;
            display: flex;
            position:fixed;
            max-width: 540px;
            z-index: 12;
        }
        .sousuo .sou{
            height: 70%;
            line-height: 30px;
            flex: 1;
            display: flex;
            margin:  auto;
            margin-left: 15px;
            background: #fff;
            border-radius: 15px;
        }
        .sousuo .sou span{
            display: block;
            /* padding-left: 40x; */
            margin-left: 40px;
        }
        .sousuo .wode{
            height: 44px;
            width: 51px;
            text-align: center;
            font-size: 12px;
        }
        .sousuo .wode img{
            width: 22px;
            height: 22px;
            display: block;
            margin: 3px auto;
            justify-content: center;
            align-items: center;
          
        }
       
        .sousuo .sou .fdj{
            position: absolute;
            left: 0;
            width: 35px;
            height: 100%;
            overflow: hidden;
            background: url(./img/sousuo.png) 15px 7px no-repeat;
            background-size: 21px auto;
            content: "";
        }
        .sousuo .sou .souzi{
           margin-left: -2px;
           margin-left: 75px;
           
        }
       
        /* 背景 */
        .image{
            width: 100%;
            height: 180px;
           
        }
        .image .img{
            display: block;
            width: 100%;
            height: 180px;
            background: url(./img/bj.jpg)no-repeat;
            background-size: 100% 180px;
        }


        .tu{
            width: 100%;
            height: 64px;
            display: flex;
            background: #fff;
            border-radius: 12px;
            margin-top: -52px  ;
            margin-bottom: 10px;
        }
        .tu  li a{
            text-decoration: none;
            color: #222;
        }
        .tu li{
            width: 20%;
            height: 100%;
            font-size: 12px;
            text-align: center;
            list-style: none;
        }
        .tu li .aa{
            width: 100%;
            height:40px;
            display: block;
            background: url(./img/home-fivemain-sprite2x@v7.15.png)no-repeat center;
            background-size: 40px ;
            justify-content: center;
            align-items: center;
        }
        .tu li .a1{
            background-position: 20px 0;
        }
        .tu li .a2{
            background-position: 20px -40px;
        }
        .tu li .a4{
            background-position: 20px -120px;
        }
        .tu li .a5{
            background-position: 20px -160px;
        }
        /* 导航条1 */
        .nav{
            width: 90%;
            height: 197.56px;
            margin: 10px auto;
            border-radius: 10px;
            overflow: hidden;
        }
        .nav .hang{
            width: 100%;
            height: 65.19px;
            display: flex;
            background-color: pink;
        }
        .hang .lie{
            flex: 23%;
            line-height: 65.19px;
            border-right: 1px solid #fff;
            box-sizing: border-box;
        }
        .nav .lie:last-child{
            border: none;
            text-align: center;
        }
        .nav .lie:nth-child(2){
            text-align: center;
        }
        .nav .lie:nth-child(3){
            text-align: center;
        }
        .hang .lie:nth-child(1){
            float: 31%;
        }
        .nav .a{
            background: linear-gradient(to right,#fa5956,#fb8650 54%);
        }
        .nav .b{
            background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .nav .c{
            background: linear-gradient(to right,#34c2aa,#6cd557);
        }
        .nav a{
            color: #fff;
            text-decoration: none;
        }
        .nav .a .lie:first-child{
            background-image: url(./img/grid-nav-items-hotel@v7.15.png);
            background-size: 73px auto;
            border-top-left-radius: 8px;
            background-repeat: no-repeat;
        }
        .nav .a .lie:nth-child(2){
            background-image: url(./img/grid-nav-items-minsu@v7.15.png);
            background-size: 37px auto;
            background-repeat: no-repeat;
            text-align: center;
            background-position: left bottom;
        }
        #s{
            flex: 46%;
            background-color: linear-gradient(to right,#ffbc49,#ffd252);
            line-height: 65.19px;
            box-sizing: border-box;
            background: url(./img/grid-nav-items-hot.png) right bottom no-repeat;
            background-size: 100% auto;
            text-align: center;
            width: 100%;
        }
        .b{
            margin: 1px 0;
        }
        .nav .b .lie:first-child{
            background-image: url(./img/grid-nav-items-flight@v7.15.png);
            background-size: 73px auto;
            border-top-left-radius: 8px;
            background-repeat: no-repeat;
        }
        .nav .b .lie:nth-child(2){
            background-image: url(./img/grid-nav-items-train.png);
            background-size: 37px auto;
            background-repeat: no-repeat;
            background-position: left bottom;
        }
        .nav .c .lie:first-child{
            background-image: url(./img/grid-nav-items-travel@v7.15.png);
            background-size: 73px auto;
            border-top-left-radius: 8px;
            background-repeat: no-repeat;
        }
        .nav .c .lie:nth-child(2){
            background-image: url(./img/grid-nav-items-dingzhi@v7.15.png);
            background-size: 37px auto;
            background-repeat: no-repeat;
            background-position: left bottom;
        }
        .nav .hang .lie:first-child {
            padding-left: 12px;
            -webkit-box-flex: 0;
            -ms-flex: 0 1 31%;
            flex: 0 1 31%;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            background-position: right bottom;
            width: 31%
        }
         #se span{
            color: #a05416;
        }
        /* 导航条 2 */
        ul{
            list-style: none;
        }
        
        .nav2{
            width: 90%;
            height: 110.06px;
            margin: 10px auto;
            display: flex;
            flex-wrap: wrap;
        }
        .nav2 li{
            flex: 20%;
            display: flex;
            justify-content: center;
            align-content: center;
        }
        .nav2 li a{
            text-decoration: none;
            color: #222;
            font-size: 12px;
            line-height: 1;
        }
        .subnav-icon {
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
            display: block;
            background: url(./img/un_ico_subnav2x@v7.33.png) ;
            background-size: 28px;
        }
        .s1{
            background-position: 0  0;   
        }
        .s2{
            background-position: 0 -28px;
        }
        .s3{
            background-position: 0 -56px;
        }
        .s4{
            background-position: 0 -84px;
        }
        .s5{
            background-position: 0 -112px;
        }
        .s6{
            background-position: 0 -140px;
        }
        .s7{
            background-position: 0 -168px;
        }
        .s8{
            background-position: 0 -196px;
        }
        .s9{
            background-position: 0 -280px;
        }
        .s10{
            background-position: 0 -254px;
        }
        .under{
            display: flex; 
            background-color: #fff;
            width: 100%;
            height: 60px;
        }
        .under li{
            width: 33.3%;
            height: 60px;
            font-size: 12px;
            text-align: center;
            
        }
        .under li a{
            text-decoration: none;
            color: #222;
        }
        .under li img{
            display: block;
            width: 20px;
            margin:10px auto;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 搜索框 -->
    <div class="sousuo">
        <div class="sou">
            <span class="fdj">
            </span>
        <span class="souzi">搜索:目的地/酒店/景点/航班号</span>
    </div>
    <div class="wode">
        <img src="./img/wode.png" alt="">
        <span>我的</span>
      </div>
    </div>
     <!-- 背景图 -->
     <div class="image">
        <span class="img">
        </span>
    </div>
    <!-- 图列表 -->
    <ul class="tu">
        <li><a href="javascript:;"><span class="aa a1"></span><span>攻略·景点</span></a></li>
        <li><a href="javascript:;"><span class="aa a2"></span><span>门票·活动</span></a></li>
        <li><a href="javascript:;"><span class="aa a3"></span><span>美食林</span></a></li>
        <li><a href="javascript:;"><span class="aa a4"></span><span>周边游</span></a></li>
        <li><a href="javascript:;"><span class="aa a5"></span><span>一日游</span></a></li>
    </ul>
   
    

    <!-- 导航条1 -->
    <div class="nav">
        <div class="hang a">
            <div class="lie"><a href="#"><span>酒店</span></a></div>
            <div class="lie"><a href="#"><span>民宿·客栈</span></a></div>
            <div class="lie" id="s"><a href="#"><span>特价·爆款</span></a></div>
        </div>
        <div class="hang b">
            <div class="lie"><a href="#"><span>机票</span></a></div>
            <div class="lie"><a href="#"><span>火车票</span></a></div>
            <div class="lie"><a href="#"><span>汽车·船票</span></a></div>
            <div class="lie"><a href="#"><span>专车·租车</span></a></div>
        </div>
        <div class="hang c">
            <div class="lie"><a href="#"><span>旅游</span></a></div>
            <div class="lie"><a href="#"><span>私家团</span></a></div>
            <div class="lie"><a href="#"><span>游轮游</span></a></div>
            <div class="lie"><a href="#"><span>定制游</span></a></div>
        </div>
    </div>
    <!-- 导航条2 -->
    <ul  class="nav2">
        <li>
            <a href="javascript:;">
                <span class="subnav-icon s1"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
           <a href="javascript:;">
               <span class="subnav-icon s2"></span>
               <span>电话卡</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s3"></span>
               <span>保险</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s4"></span>
               <span>换钞</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s5"></span>
               <span>向导</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s6"></span>
               <span>机票</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s7"></span>
               <span>礼品卡</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s8"></span>
               <span>借钱</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s9"></span>
               <span>社区</span>
           </a>
       </li>
       <li>
           <a href="javascript:;">
               <span class="subnav-icon s10"></span>
               <span>更多</span>
           </a>
       </li>

    </ul>
    <!-- 底部 -->
    <ul class="under">
        <li><a href="javascript:;"><img src="./img/dianhua.png" alt=""><span>电话预订</span></a></li>
        <li><a href="javascript:;"><img src="./img/xiazai.png" alt=""><span>下载客服端</span></a></li>
        <li><a href="javascript:;"><img src="./img/wode.png" alt=""><span>我的</span></a></li>
    </ul>
</body>
</html>